<template>
  <view class="container">
    <uni-nav-bar left-icon="back" title="积分商城" />
    <view class="product-list">
      <view v-for="item in products" :key="item.id" class="product-item">
        <image :src="item.image" mode="aspectFill"></image>
        <view class="info">
          <text class="name">{{item.name}}</text>
          <text class="points">{{item.points}} 积分</text>
          <button @click="exchange(item.id)">兑换</button>
        </view>
      </view>
    </view>
    <view v-if="!products.length" class="no-products">暂无商品</view>
  </view>
</template>

<script>
import api from '@/api/index.js';
export default {
  data() {
    return {
      products: []
    };
  },
  onLoad() {
    this.loadProducts();
  },
  methods: {
    loadProducts() {
      // 假设API调用
      api.pointsApi.getMallProducts().then(res => {
        this.products = res.data;
      });
    },
    exchange(id) {
      uni.showToast({ title: '兑换成功', icon: 'success' });
    }
  }
};
</script>

<style>
  .product-list { padding: 10px; }
  .product-item { display: flex; margin-bottom: 10px; }
  .product-item image { width: 80px; height: 80px; }
  .info { margin-left: 10px; flex: 1; }
  .name { font-size: 14px; }
  .points { color: #ff9600; }
</style>